// 主页面展示界面
<template>
  <el-container class="home-container">
    <el-header class="el-header" style="height: 220px; width: 100%">
      <el-menu class="menu-logo" router>
        <el-menu-item>
          <div class="InfoButton">
            <el-button type="info"  @click="logout">
              退出登录
            </el-button>
          </div>
          <div class="logoinwz-div">
            <!-- 爱忆港文字 -->
            <img src="../assets/images/logow.png" alt="" />
          </div>

          <div class="el-progress-text">王者成长值</div>
          <!-- 爱忆港图标 -->
          <div class="logointp-div">
            <img src="../assets/images/logop.png" alt="" />
          </div>

          <!-- 进度条 -->
          <div class="el-progress-jdt">
            <el-progress
              :text-inside="true"
              :stroke-width="26"
              :percentage="70"
            ></el-progress>
          </div>

          <div class="daohanglan">
            <el-link @click="redirect('/welcome')">首页</el-link>&nbsp;&nbsp;&nbsp;
            <el-link @click="redirect('/photo')">欢乐一秒</el-link>&nbsp;&nbsp;&nbsp;
            <el-link @click="redirect('/life')">日常生活</el-link>&nbsp;&nbsp;&nbsp;
            <el-link @click="redirect('/personal')">家庭信息</el-link>&nbsp;&nbsp;&nbsp;
            <el-link @click="redirect('/training')">生活规划</el-link>&nbsp;&nbsp;&nbsp;
            <el-link @click="redirect('/cost')">家庭花销</el-link>
          </div>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  methods: {
    redirect(path) {
      this.$router.push({ path: path });
    },
    logout() {
      //1.删除token数据
      window.sessionStorage.clear();

      //2.跳转到用户登录页面  注意路径的写法 加/
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  padding: 0;
  box-sizing: none;
  element.style {
    height: 220px;
    width: 100%;
  }
}
.el-main {
  height: 100%;
}
.menu-logo {
  height: 220px;
  background-image: url(../assets/login.png);
}

.el-menu-item,
.el-submenu__title {
  height: 0;
  line-height: 56px;
  list-style: none;
  position: relative;
  white-space: nowrap;
}

.daohanglan {
  position: absolute;
  left: 760px;
  top: 145px;
  transform: translate(-50%, 25%);
  .el-link {
    font-size: 28px;
    color: #000;
  }
}

.logoinwz-div {
  width: 158px;
  height: 150px;
  position: absolute;
  left: 240px;
  top: -90px;
  transform: translate(-50%, 25%);
  img {
    width: 260%;
    height: 150%;
  }
}

.el-progress-jdt {
  width: 380px;
  height: 50px;
  position: absolute;
  left: 720px;
  top: 145px;
  transform: translate(-50%, -20%);
}

.el-progress-text {
  width: 150px;
  height: 60px;
  font-size: 28px;
  color: rgb(180, 22, 228);
  position: absolute;
  left: 600px;
  top: 90px;
  transform: translate(-50%, -20%);
}

.logointp-div {
  width: 100px;
  height: 90px;
  position: absolute;
  left: 440px;
  top: 100px;
  transform: translate(-50%, -20%);
  img {
    width: 160%;
    height: 120%;
  }
}

.el-button--info {
  color: #fbfbfc;
  background-color: #0556f8;
  border-color: #0255fc;
}

.InfoButton {
  position: absolute;
  left: 96%;
  top: 20px;
  transform: translate(-50%, -20%);
}
</style>